<template>
    <div id="top-area-filter" :class="[topFilterZ, className]">
        <a class="choose" @click="clickChooseArea">
            <span class="choose-text">全部</span>
            <van-icon :class="chooseIcon" class="area-icon" name="play" />
        </a>
        <div v-show="isShowAreaDefaultOpt" class="area-option">
            <a v-for="item in defaultList" :key="item.index" class="option">{{item.name}}</a>
        </div>
        <div id="area-list" v-show="isShowAreaList">
            <a 
            v-for="item in areaList" 
            :class="{active: activeFilterAreaCode === item.code}" 
            :key="item.code" 
            class="list">
                {{item.name}}
            </a>
        </div>
    </div>
</template>

<script>
// UI组件
import Vue from 'vue'
import { Icon } from 'vant'

// 自定义方法
import { getAreaList } from "_network/request"
import { checkArrIndexObj } from "_commonFn/array"

Vue.use(Icon)

export default {
    name: 'Area',
    props: {
        className: {
            type: String,
            default: 'top-filter-child'
        },
        overlayShowHome: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShowAreaDefaultOpt: false,
            topFilterZ: '',
            activeFilterAreaCode: '',
            defaultList: [
                {name: '广东'},
                {name: '江苏'},
                {name: '浙江'},
                {name: '上海'},
                {name: '北京'},
                {name: '山东'},
                {name: '福建'},
            ],
            areaList: []
        }
    },
    methods: {
        clickChooseArea() {
            if (this.overlayShowHome) {
                this.$emit('homeOverHide')
            } else {
                this.$emit('homeOverShow')
            }
        },
        pushAreaList(data) {
            data.forEach((item, index) => {
                const defaultObj = checkArrIndexObj({
                    arr: this.defaultList,
                    key: 'name',
                    val: item.AreaName
                })
                if (defaultObj != 0) {
                    this.defaultList[defaultObj.index].code = item.Code
                    if (this.isShowAreaDefaultOpt === false) this.isShowAreaDefaultOpt = true
                }
                this.areaList.push({
                    name: item.AreaName,
                    code: item.Code
                })
            })
        }
    },
    computed: {
        chooseIcon() {
            if (this.overlayShowHome) {
                this.topFilterZ = 'area-filter-show'
                return 'top'
            }
            this.topFilterZ = ''
            return 'bottom'
        },
        isShowAreaList() {
            if (this.overlayShowHome === false ) {
                return false
            }
            return true
        }
    },
    mounted() {
        getAreaList({})
        .then(res => {
            console.log('获取所有区域列表 res：', res)
            if (res.errcode == 1000) {
                this.pushAreaList(res.data)
            }
        }, res => {
            console.log('fail: res', res)
        })
        .catch(res => {
            console.log('catch：res', res)
        })
    }
}
</script>

<style lang="scss" scoped>
    .top-filter-child {
        width: 100%;
        height: 35px;
        background: #f3f3f3;
        padding: 0 10px;
        display: flex;
        align-items: center;
        font-size: 12px;
        justify-content: space-between;
        position: relative;
        
        .choose {
            flex-shrink: 0;
            margin-right: 10px;
            .area-icon {
                font-size: 14px;
                top: 2px;
            }
            .top {
                transform:rotate(-90deg);
            }
            .bottom {
                transform:rotate(90deg);
            }
        }

        .area-option {
            width: 100%;
            .option {
                color: #333333;
                margin-left: 8px;
            }
        }
    }

    .area-filter-show {
        z-index: 2;
    }

    #area-list {
        position: absolute;
        top: 35px;
        left: 0;
        background: white;
        z-index: 2;
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        max-height: 400px;
        overflow-y: scroll;

        .list {
            color: #999999;
            text-align: center;
            display: flex;
            height: 50px;
            width: 50px;
            justify-content: center;
            align-items: center;
        }

        .active {
            color: #0077bf;
            font-weight: bold;
        }
    }
</style>